<template>
  <div ref="chartRef" style="width: 800px; height: 500px;" class="currency-chart"></div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
import { unref, nextTick, watch, computed, ref, onMounted } from 'vue';

// import { onMounted, ref, Ref, defineProps, watch } from 'vue';
// import { useECharts } from '/@/hooks/web/useECharts';
// import { useEventListener } from '/@/hooks/event/useEventListener';
const props = defineProps({
  options: {
    type: Object,
    default: () => ({}),
    required: true,
  },
});
const chartRef = ref<HTMLDivElement | null>(null);
let myChart = ref<any>()
console.log('打印接收到的最后一个配置项的数据',props.options);


// 定义一个函数用来补充echarts图表的图例数据
// const addLegendData = (options: any) => {
//   // 首先得到图例中需要展示的名字
//   let nameList = options.series.map((item) => {
//     return item.name
//   })
//   console.log('这是数据的legend',nameList);
  

//   options.legend.data = nameList
//   return options
// }

onMounted(() => {
  // let finalOptions = addLegendData(props.options)
  nextTick(() => {
    myChart.value = echarts.init(chartRef.value);
    console.log(chartRef.value);

    console.log('测试呀', props.options);

    // 页面挂载的时候设置图表的配置项
    myChart.value.setOption(props.options)
  })


})


  // const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  //监听options发生变化时，重新给echarts设置传入的options
  // onMounted(() => {
  //   setOptions(props.options);
  // });
  // useEventListener({
  //   el: window,
  //   name: 'resize',
  //   listener: () => {
  //     setOptions(props.options);
  //   },
  // });
  // watch(
  //   () => props.options,
  //   (newOptions) => {
  //     setOptions(newOptions);
  //   },
  //   { deep: true },
  // );
</script>
<style lang="less" scoped>
.currency-chart {
  width: 100%;
  height: 100%;
}
</style>
